<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《在Flutter中制作足球记分牌应用程序》 - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="早起的年轻人做的网站"><meta property="og:title" content="《在Flutter中制作足球记分牌应用程序》" />
<meta property="og:description" content="
在这篇博文中，我将向您展示如何使用 Flutter 制作足球记分牌应用程序
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/%E5%9C%A8flutter%E4%B8%AD%E5%88%B6%E4%BD%9C%E8%B6%B3%E7%90%83%E8%AE%B0%E5%88%86%E7%89%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" />
<meta property="og:image" content="https://luckly.work/logo.png"/>
<meta property="article:published_time" content="2021-07-18T20:39:32+08:00" />
<meta property="article:modified_time" content="2021-07-18T20:39:32+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:title" content="《在Flutter中制作足球记分牌应用程序》"/>
<meta name="twitter:description" content="
在这篇博文中，我将向您展示如何使用 Flutter 制作足球记分牌应用程序
"/>
<meta name="application-name" content="LoveIt">
<meta name="apple-mobile-web-app-title" content="LoveIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/%E5%9C%A8flutter%E4%B8%AD%E5%88%B6%E4%BD%9C%E8%B6%B3%E7%90%83%E8%AE%B0%E5%88%86%E7%89%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" /><link rel="prev" href="https://luckly.work/%E5%9C%A8flutter%E4%B8%AD%E5%88%A9%E7%94%A8firebase%E6%8F%92%E4%BB%B6%E8%BF%9B%E8%A1%8C%E7%94%A8%E6%88%B7%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" /><link rel="next" href="https://luckly.work/%E5%9C%A8flutter%E4%B8%AD%E7%9A%84%E5%BC%80%E5%8F%91%E5%B0%8F%E6%8A%80%E5%B7%A71/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《在Flutter中制作足球记分牌应用程序》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/%E5%9C%A8flutter%E4%B8%AD%E5%88%B6%E4%BD%9C%E8%B6%B3%E7%90%83%E8%AE%B0%E5%88%86%E7%89%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "flutter","wordcount":  1780 ,
        "url": "https:\/\/luckly.work\/%E5%9C%A8flutter%E4%B8%AD%E5%88%B6%E4%BD%9C%E8%B6%B3%E7%90%83%E8%AE%B0%E5%88%86%E7%89%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F\/","datePublished": "2021-07-18T20:39:32+08:00","dateModified": "2021-07-18T20:39:32+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/luckly.work\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "早起的年轻人"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="Lucklyの博客 - 在阅读中遇见自己"><span class="header-title-pre"><i class='far fa-kiss-wink-heart fa-fw'></i></span><span id="id-1" class="typeit"></span></a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> 所有文章 </a><a class="menu-item" href="/categories/flutter/"> Flutter </a><a class="menu-item" href="/categories/read/"> 读书笔记 </a><a class="menu-item" href="/categories/go/"> Go </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/categories/"> 分类 </a><a class="menu-item" href="/about/"> 关于 </a><a class="menu-item" href="https://github.com/ITmxs" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw'></i> Github </a><a class="menu-item" href="/friend/"><i class='fas fa-user-friends'></i> 友链 </a><span class="menu-item delimiter"></span><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-desktop">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="Lucklyの博客 - 在阅读中遇见自己"><span class="header-title-pre"><i class='far fa-kiss-wink-heart fa-fw'></i></span><span id="id-2" class="typeit"></span></a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-mobile">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </div>
                    <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
                        取消
                    </a>
                </div><a class="menu-item" href="/posts/" title="">所有文章</a><a class="menu-item" href="/categories/flutter/" title="">Flutter</a><a class="menu-item" href="/categories/read/" title="">读书笔记</a><a class="menu-item" href="/categories/go/" title="">Go</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/categories/" title="">分类</a><a class="menu-item" href="/about/" title="">关于</a><a class="menu-item" href="https://github.com/ITmxs" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw'></i>Github</a><a class="menu-item" href="/friend/" title=""><i class='fas fa-user-friends'></i>友链</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《在Flutter中制作足球记分牌应用程序》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>早起的年轻人</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-18">2021-07-18</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 1780 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 4 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#项目设置">项目设置</a></li>
      </ul>
    </li>
    <li><a href="#创建-api-服务类">创建 API 服务类</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>在这篇博文中，我将向您展示如何使用 Flutter 制作足球记分牌应用程序</p>
</blockquote>
<p>在本教程中，我们将使用此 API：<a href="https://www.api-football.com/" target="_blank" rel="noopener noreffer">https</a> : <a href="https://www.api-football.com/" target="_blank" rel="noopener noreffer">//www.api-football.com/</a></p>
<p>这是一个很好的教程，您将在其中学习如何使用 flutter 从 REST API 发出 HTTP 请求，所以不用多说，让我们开始吧</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210718204748028.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210718204748028.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210718204748028.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210718204748028.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210718204748028.png"
        title="image-20210718204748028" /></p>
<h2 id="项目设置">项目设置</h2>
<p>所以在我们开始编码之前，你必须做两件事</p>
<ol>
<li>注册并获取您的 API 密钥</li>
<li>添加flutter的HTTP包</li>
</ol>
<p>获得 API 密钥后，打开 Flutter 项目并打开 pubspec.yaml 文件并添加此依赖项。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">dependencies:
   http: ^0.12.2
</code></pre></td></tr></table>
</div>
</div><p>现在让我们开始编码。</p>
<h1 id="创建-api-服务类">创建 API 服务类</h1>
<p>首先，我们将创建一个新的 dart 文件并将其命名为“api_manager.dart”。在这个类中，我们将创建为我们获取数据的函数。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-dart" data-lang="dart"><span class="o">/</span><span class="n">before</span> <span class="n">let</span><span class="s1">&#39;s add the http package</span>
<span class="k">import</span> <span class="s1">&#39;dart:convert&#39;</span><span class="p">;</span>

<span class="k">import</span> <span class="s1">&#39;package:http/http.dart&#39;</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">&#39;package:soccer_tutorial/soccermodel.dart&#39;</span><span class="p">;</span>

<span class="kd">class</span> <span class="nc">SoccerApi</span> <span class="p">{</span>
  <span class="c1">//now let&#39;s set our variables
</span><span class="c1"></span>  <span class="c1">//first : let&#39;s add the endpoint URL
</span><span class="c1"></span>  <span class="c1">// we will get all the data from api-sport.io
</span><span class="c1"></span>  <span class="c1">// we will just change our endpoint
</span><span class="c1"></span>  <span class="c1">//the null means that the match didn&#39;t started yet 
</span><span class="c1"></span>  <span class="c1">//let&#39;s fix that
</span><span class="c1"></span>  <span class="kd">final</span> <span class="kt">String</span> <span class="n">apiUrl</span> <span class="o">=</span>
      <span class="s2">&#34;https://v3.football.api-sports.io/fixtures?season=2020&amp;league=39&#34;</span><span class="p">;</span>
  <span class="c1">//In our tutorial we will only see how to get the live matches
</span><span class="c1"></span>
 
  <span class="c1">//make sure to read the api documentation to be ables too understand it
</span><span class="c1"></span>
  <span class="c1">// you will find your api key in your dashboard
</span><span class="c1"></span>  <span class="c1">//so create your account it&#39;s free
</span><span class="c1"></span>  <span class="c1">//Now let&#39;s add the headers
</span><span class="c1"></span>  <span class="kd">static</span> <span class="kd">const</span> <span class="n">headers</span> <span class="o">=</span> <span class="p">{</span>
    <span class="s1">&#39;x-rapidapi-host&#39;</span><span class="o">:</span> <span class="s2">&#34;v3.football.api-sports.io&#34;</span><span class="p">,</span>
    <span class="c1">//Always make sure to check the api key and the limit of a request in a free api
</span><span class="c1"></span>    <span class="s1">&#39;x-rapidapi-key&#39;</span><span class="o">:</span> <span class="s2">&#34;PUT YOUR API KEY HERE OR IT WILL NOT WORK&#34;</span>
  <span class="p">};</span>

  <span class="c1">//Now we will create our method
</span><span class="c1"></span>  <span class="c1">//but before this we need to create our model
</span><span class="c1"></span>
  <span class="c1">//Now we finished with our Model
</span><span class="c1"></span>  <span class="n">Future</span><span class="o">&lt;</span><span class="n">List</span><span class="o">&lt;</span><span class="n">SoccerMatch</span><span class="o">&gt;&gt;</span> <span class="n">getAllMatches</span><span class="p">()</span> <span class="kd">async</span> <span class="p">{</span>
    <span class="n">Response</span> <span class="n">res</span> <span class="o">=</span> <span class="kd">await</span> <span class="kd">get</span><span class="p">(</span><span class="n">apiUrl</span><span class="p">,</span> <span class="nl">headers:</span> <span class="n">headers</span><span class="p">);</span>
    <span class="kd">var</span> <span class="n">body</span><span class="p">;</span>

    <span class="k">if</span> <span class="p">(</span><span class="n">res</span><span class="p">.</span><span class="n">statusCode</span> <span class="o">==</span> <span class="m">200</span><span class="p">)</span> <span class="p">{</span>
      <span class="c1">// this mean that we are connected to the data base
</span><span class="c1"></span>      <span class="n">body</span> <span class="o">=</span> <span class="n">jsonDecode</span><span class="p">(</span><span class="n">res</span><span class="p">.</span><span class="n">body</span><span class="p">);</span>
      <span class="n">List</span><span class="o">&lt;</span><span class="kt">dynamic</span><span class="o">&gt;</span> <span class="n">matchesList</span> <span class="o">=</span> <span class="n">body</span><span class="p">[</span><span class="s1">&#39;response&#39;</span><span class="p">];</span>
      <span class="n">print</span><span class="p">(</span><span class="s2">&#34;Api service: </span><span class="si">${</span><span class="n">body</span><span class="si">}</span><span class="s2">&#34;</span><span class="p">);</span> <span class="c1">// to debug
</span><span class="c1"></span>      <span class="n">List</span><span class="o">&lt;</span><span class="n">SoccerMatch</span><span class="o">&gt;</span> <span class="n">matches</span> <span class="o">=</span> <span class="n">matchesList</span>
          <span class="p">.</span><span class="n">map</span><span class="p">((</span><span class="kt">dynamic</span> <span class="n">item</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="n">SoccerMatch</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">item</span><span class="p">))</span>
          <span class="p">.</span><span class="n">toList</span><span class="p">();</span>

      <span class="k">return</span> <span class="n">matches</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>

</code></pre></td></tr></table>
</div>
</div><p>现在让我们创建模型类，我们将在其中存储我们的数据对象，用于 API 的不同数据</p>
<p>所以创建一个新文件并将其命名为 Footballmodel.dart 并添加此代码</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span><span class="lnt">66
</span><span class="lnt">67
</span><span class="lnt">68
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-dart" data-lang="dart"><span class="kd">class</span> <span class="nc">SoccerMatch</span> <span class="p">{</span>
  <span class="c1">//here we will see the different data
</span><span class="c1"></span>  <span class="c1">//you will find every thing you need in the doc
</span><span class="c1"></span>  <span class="c1">//I&#39;m not going to use every data, just few ones
</span><span class="c1"></span>
  <span class="n">Fixture</span> <span class="n">fixture</span><span class="p">;</span>
  <span class="n">Team</span> <span class="n">home</span><span class="p">;</span>
  <span class="n">Team</span> <span class="n">away</span><span class="p">;</span>
  <span class="n">Goal</span> <span class="n">goal</span><span class="p">;</span>
  <span class="n">SoccerMatch</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="n">fixture</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="n">home</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="n">away</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="n">goal</span><span class="p">);</span>

  <span class="kd">factory</span> <span class="n">SoccerMatch</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">Map</span><span class="o">&lt;</span><span class="kt">String</span><span class="p">,</span> <span class="kt">dynamic</span><span class="o">&gt;</span> <span class="n">json</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="n">SoccerMatch</span><span class="p">(</span>
        <span class="n">Fixture</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">json</span><span class="p">[</span><span class="s1">&#39;fixture&#39;</span><span class="p">]),</span>
        <span class="n">Team</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">json</span><span class="p">[</span><span class="s1">&#39;teams&#39;</span><span class="p">][</span><span class="s1">&#39;home&#39;</span><span class="p">]),</span>
        <span class="n">Team</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">json</span><span class="p">[</span><span class="s1">&#39;teams&#39;</span><span class="p">][</span><span class="s1">&#39;away&#39;</span><span class="p">]),</span>
        <span class="n">Goal</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">json</span><span class="p">[</span><span class="s1">&#39;goals&#39;</span><span class="p">]));</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">//here we will store the fixture
</span><span class="c1"></span><span class="kd">class</span> <span class="nc">Fixture</span> <span class="p">{</span>
  <span class="kt">int</span> <span class="n">id</span><span class="p">;</span>
  <span class="kt">String</span> <span class="n">date</span><span class="p">;</span>
  <span class="n">Status</span> <span class="n">status</span><span class="p">;</span>
  <span class="n">Fixture</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="n">id</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="n">date</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="n">status</span><span class="p">);</span>

  <span class="kd">factory</span> <span class="n">Fixture</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">Map</span><span class="o">&lt;</span><span class="kt">String</span><span class="p">,</span> <span class="kt">dynamic</span><span class="o">&gt;</span> <span class="n">json</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="n">Fixture</span><span class="p">(</span><span class="n">json</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">],</span> <span class="n">json</span><span class="p">[</span><span class="s1">&#39;date&#39;</span><span class="p">],</span> <span class="n">Status</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">json</span><span class="p">[</span><span class="s1">&#39;status&#39;</span><span class="p">]));</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">//here we will store the Status
</span><span class="c1"></span><span class="kd">class</span> <span class="nc">Status</span> <span class="p">{</span>
  <span class="kt">int</span> <span class="n">elapsedTime</span><span class="p">;</span>
  <span class="kt">String</span> <span class="n">long</span><span class="p">;</span>
  <span class="n">Status</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="n">elapsedTime</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="n">long</span><span class="p">);</span>

  <span class="kd">factory</span> <span class="n">Status</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">Map</span><span class="o">&lt;</span><span class="kt">String</span><span class="p">,</span> <span class="kt">dynamic</span><span class="o">&gt;</span> <span class="n">json</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="n">Status</span><span class="p">(</span><span class="n">json</span><span class="p">[</span><span class="s1">&#39;elapsed&#39;</span><span class="p">],</span> <span class="n">json</span><span class="p">[</span><span class="s1">&#39;long&#39;</span><span class="p">]);</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">//here we will store the Team data
</span><span class="c1"></span><span class="kd">class</span> <span class="nc">Team</span> <span class="p">{</span>
  <span class="kt">int</span> <span class="n">id</span><span class="p">;</span>
  <span class="kt">String</span> <span class="n">name</span><span class="p">;</span>
  <span class="kt">String</span> <span class="n">logoUrl</span><span class="p">;</span>
  <span class="kt">bool</span> <span class="n">winner</span><span class="p">;</span>
  <span class="n">Team</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="n">id</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="n">name</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="n">logoUrl</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="n">winner</span><span class="p">);</span>

  <span class="kd">factory</span> <span class="n">Team</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">Map</span><span class="o">&lt;</span><span class="kt">String</span><span class="p">,</span> <span class="kt">dynamic</span><span class="o">&gt;</span> <span class="n">json</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="n">Team</span><span class="p">(</span><span class="n">json</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">],</span> <span class="n">json</span><span class="p">[</span><span class="s1">&#39;name&#39;</span><span class="p">],</span> <span class="n">json</span><span class="p">[</span><span class="s1">&#39;logo&#39;</span><span class="p">],</span> <span class="n">json</span><span class="p">[</span><span class="s1">&#39;winner&#39;</span><span class="p">]);</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">//here we will store the Goal data
</span><span class="c1"></span><span class="kd">class</span> <span class="nc">Goal</span> <span class="p">{</span>
  <span class="kt">int</span> <span class="n">home</span><span class="p">;</span>
  <span class="kt">int</span> <span class="n">away</span><span class="p">;</span>
  <span class="n">Goal</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="n">home</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="n">away</span><span class="p">);</span>

  <span class="c1">//Now we will create a factory method to copy the data from
</span><span class="c1"></span>  <span class="c1">// the json file
</span><span class="c1"></span>  <span class="kd">factory</span> <span class="n">Goal</span><span class="p">.</span><span class="n">fromJson</span><span class="p">(</span><span class="n">Map</span><span class="o">&lt;</span><span class="kt">String</span><span class="p">,</span> <span class="kt">dynamic</span><span class="o">&gt;</span> <span class="n">json</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="n">Goal</span><span class="p">(</span><span class="n">json</span><span class="p">[</span><span class="s1">&#39;home&#39;</span><span class="p">],</span> <span class="n">json</span><span class="p">[</span><span class="s1">&#39;away&#39;</span><span class="p">]);</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>现在我们差不多完成了，我们只需要创建应用程序的 UI 并调用 fetch 函数</p>
<p>main.dart</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-dart" data-lang="dart"><span class="k">import</span> <span class="s1">&#39;package:flutter/material.dart&#39;</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">&#39;package:soccer_tutorial/api_manager.dart&#39;</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">&#39;package:soccer_tutorial/pagerbody.dart&#39;</span><span class="p">;</span>

<span class="kt">void</span> <span class="n">main</span><span class="p">()</span> <span class="p">{</span>
  <span class="n">runApp</span><span class="p">(</span><span class="n">MyApp</span><span class="p">());</span>
<span class="p">}</span>

<span class="kd">class</span> <span class="nc">MyApp</span> <span class="kd">extends</span> <span class="n">StatelessWidget</span> <span class="p">{</span>
  <span class="c1">// This widget is the root of your application.
</span><span class="c1"></span>  <span class="err">@</span><span class="n">override</span>
  <span class="n">Widget</span> <span class="n">build</span><span class="p">(</span><span class="n">BuildContext</span> <span class="n">context</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="n">MaterialApp</span><span class="p">(</span>
      <span class="nl">debugShowCheckedModeBanner:</span> <span class="kc">false</span><span class="p">,</span>
      <span class="nl">home:</span> <span class="n">SoccerApp</span><span class="p">(),</span>
    <span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="kd">class</span> <span class="nc">SoccerApp</span> <span class="kd">extends</span> <span class="n">StatefulWidget</span> <span class="p">{</span>
  <span class="err">@</span><span class="n">override</span>
  <span class="n">_SoccerAppState</span> <span class="n">createState</span><span class="p">()</span> <span class="o">=&gt;</span> <span class="n">_SoccerAppState</span><span class="p">();</span>
<span class="p">}</span>

<span class="kd">class</span> <span class="nc">_SoccerAppState</span> <span class="kd">extends</span> <span class="n">State</span><span class="o">&lt;</span><span class="n">SoccerApp</span><span class="o">&gt;</span> <span class="p">{</span>
  <span class="err">@</span><span class="n">override</span>
  <span class="n">Widget</span> <span class="n">build</span><span class="p">(</span><span class="n">BuildContext</span> <span class="n">context</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="n">Scaffold</span><span class="p">(</span>
      <span class="nl">backgroundColor:</span> <span class="n">Color</span><span class="p">(</span><span class="mh">0xFFFAFAFA</span><span class="p">),</span>
      <span class="nl">appBar:</span> <span class="n">AppBar</span><span class="p">(</span>
        <span class="nl">backgroundColor:</span> <span class="n">Color</span><span class="p">(</span><span class="mh">0xFFFAFAFA</span><span class="p">),</span>
        <span class="nl">elevation:</span> <span class="m">0.0</span><span class="p">,</span>
        <span class="nl">title:</span> <span class="n">Text</span><span class="p">(</span>
          <span class="s2">&#34;SOCCERBOARD&#34;</span><span class="p">,</span>
          <span class="nl">style:</span> <span class="n">TextStyle</span><span class="p">(</span><span class="nl">color:</span> <span class="n">Colors</span><span class="p">.</span><span class="n">black</span><span class="p">),</span>
        <span class="p">),</span>
        <span class="nl">centerTitle:</span> <span class="kc">true</span><span class="p">,</span>
      <span class="p">),</span>
      <span class="c1">//now we have finished the api service let&#39;s call it
</span><span class="c1"></span>      <span class="c1">//Now befo re we create Our layout let&#39;s create our API service
</span><span class="c1"></span>      <span class="nl">body:</span> <span class="n">FutureBuilder</span><span class="p">(</span>
        <span class="nl">future:</span> <span class="n">SoccerApi</span><span class="p">()</span>
            <span class="p">.</span><span class="n">getAllMatches</span><span class="p">(),</span> <span class="c1">//Here we will call our getData() method,
</span><span class="c1"></span>        <span class="nl">builder:</span> <span class="p">(</span><span class="n">context</span><span class="p">,</span> <span class="n">snapshot</span><span class="p">)</span> <span class="p">{</span>
          <span class="c1">//the future builder is very intersting to use when you work with api
</span><span class="c1"></span>          <span class="k">if</span> <span class="p">(</span><span class="n">snapshot</span><span class="p">.</span><span class="n">hasData</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">print</span><span class="p">((</span><span class="n">snapshot</span><span class="p">.</span><span class="n">data</span><span class="p">).</span><span class="n">length</span><span class="p">);</span>
            <span class="k">return</span> <span class="n">PageBody</span><span class="p">(</span><span class="n">snapshot</span><span class="p">.</span><span class="n">data</span><span class="p">);</span>
          <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="k">return</span> <span class="n">Center</span><span class="p">(</span>
              <span class="nl">child:</span> <span class="n">CircularProgressIndicator</span><span class="p">(),</span>
            <span class="p">);</span>
          <span class="p">}</span>
        <span class="p">},</span> <span class="c1">// here we will buil the app layout
</span><span class="c1"></span>      <span class="p">),</span>
    <span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="c1">//So as we can see w got our matches data,
</span><span class="c1">// the data size depend on the date and the time so
</span><span class="c1">// you can get as many data as many matches are curetly playing
</span><span class="c1">//Now let&#39;s try to get data by seasons and leagues
</span></code></pre></td></tr></table>
</div>
</div><p>我们需要在这样的单独文件中创建一些小部件</p>
<p>pagebody.dart</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span><span class="lnt">66
</span><span class="lnt">67
</span><span class="lnt">68
</span><span class="lnt">69
</span><span class="lnt">70
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-dart" data-lang="dart"><span class="k">import</span> <span class="s1">&#39;package:flutter/material.dart&#39;</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">&#39;package:soccer_tutorial/goalstat.dart&#39;</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">&#39;package:soccer_tutorial/matchtile.dart&#39;</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">&#39;package:soccer_tutorial/teamstat.dart&#39;</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">&#39;soccermodel.dart&#39;</span><span class="p">;</span>

<span class="n">Widget</span> <span class="n">PageBody</span><span class="p">(</span><span class="n">List</span><span class="o">&lt;</span><span class="n">SoccerMatch</span><span class="o">&gt;</span> <span class="n">allmatches</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="n">Column</span><span class="p">(</span>
    <span class="nl">children:</span> <span class="p">[</span>
      <span class="n">Expanded</span><span class="p">(</span>
        <span class="nl">flex:</span> <span class="m">2</span><span class="p">,</span>
        <span class="nl">child:</span> <span class="n">Container</span><span class="p">(</span>
          <span class="nl">child:</span> <span class="n">Padding</span><span class="p">(</span>
            <span class="nl">padding:</span> <span class="n">EdgeInsets</span><span class="p">.</span><span class="n">symmetric</span><span class="p">(</span><span class="nl">horizontal:</span> <span class="m">18.0</span><span class="p">,</span> <span class="nl">vertical:</span> <span class="m">24.0</span><span class="p">),</span>
            <span class="nl">child:</span> <span class="n">Row</span><span class="p">(</span>
              <span class="nl">mainAxisAlignment:</span> <span class="n">MainAxisAlignment</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
              <span class="nl">crossAxisAlignment:</span> <span class="n">CrossAxisAlignment</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
              <span class="nl">children:</span> <span class="p">[</span>
                <span class="n">teamStat</span><span class="p">(</span><span class="s2">&#34;Local Team&#34;</span><span class="p">,</span> <span class="n">allmatches</span><span class="p">[</span><span class="m">0</span><span class="p">].</span><span class="n">home</span><span class="p">.</span><span class="n">logoUrl</span><span class="p">,</span>
                    <span class="n">allmatches</span><span class="p">[</span><span class="m">0</span><span class="p">].</span><span class="n">home</span><span class="p">.</span><span class="n">name</span><span class="p">),</span>
                <span class="n">goalStat</span><span class="p">(</span><span class="n">allmatches</span><span class="p">[</span><span class="m">0</span><span class="p">].</span><span class="n">fixture</span><span class="p">.</span><span class="n">status</span><span class="p">.</span><span class="n">elapsedTime</span><span class="p">,</span>
                    <span class="n">allmatches</span><span class="p">[</span><span class="m">0</span><span class="p">].</span><span class="n">goal</span><span class="p">.</span><span class="n">home</span><span class="p">,</span> <span class="n">allmatches</span><span class="p">[</span><span class="m">0</span><span class="p">].</span><span class="n">goal</span><span class="p">.</span><span class="n">away</span><span class="p">),</span>
                <span class="n">teamStat</span><span class="p">(</span><span class="s2">&#34;Visitor Team&#34;</span><span class="p">,</span> <span class="n">allmatches</span><span class="p">[</span><span class="m">0</span><span class="p">].</span><span class="n">away</span><span class="p">.</span><span class="n">logoUrl</span><span class="p">,</span>
                    <span class="n">allmatches</span><span class="p">[</span><span class="m">0</span><span class="p">].</span><span class="n">away</span><span class="p">.</span><span class="n">name</span><span class="p">),</span>
              <span class="p">],</span>
            <span class="p">),</span>
          <span class="p">),</span>
        <span class="p">),</span>
      <span class="p">),</span>
      <span class="n">Expanded</span><span class="p">(</span>
        <span class="nl">flex:</span> <span class="m">5</span><span class="p">,</span>
        <span class="nl">child:</span> <span class="n">Container</span><span class="p">(</span>
          <span class="nl">width:</span> <span class="kt">double</span><span class="p">.</span><span class="n">infinity</span><span class="p">,</span>
          <span class="nl">decoration:</span> <span class="n">BoxDecoration</span><span class="p">(</span>
            <span class="nl">color:</span> <span class="n">Color</span><span class="p">(</span><span class="mh">0xFF4373D9</span><span class="p">),</span>
            <span class="nl">borderRadius:</span> <span class="n">BorderRadius</span><span class="p">.</span><span class="n">only</span><span class="p">(</span>
              <span class="nl">topLeft:</span> <span class="n">Radius</span><span class="p">.</span><span class="n">circular</span><span class="p">(</span><span class="m">40.0</span><span class="p">),</span>
              <span class="nl">topRight:</span> <span class="n">Radius</span><span class="p">.</span><span class="n">circular</span><span class="p">(</span><span class="m">40.0</span><span class="p">),</span>
            <span class="p">),</span>
          <span class="p">),</span>
          <span class="nl">child:</span> <span class="n">Padding</span><span class="p">(</span>
            <span class="nl">padding:</span> <span class="n">EdgeInsets</span><span class="p">.</span><span class="n">all</span><span class="p">(</span><span class="m">16.0</span><span class="p">),</span>
            <span class="nl">child:</span> <span class="n">Column</span><span class="p">(</span>
              <span class="nl">mainAxisAlignment:</span> <span class="n">MainAxisAlignment</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
              <span class="nl">crossAxisAlignment:</span> <span class="n">CrossAxisAlignment</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
              <span class="nl">children:</span> <span class="p">[</span>
                <span class="n">Text</span><span class="p">(</span>
                  <span class="s2">&#34;MATCHES&#34;</span><span class="p">,</span>
                  <span class="nl">style:</span> <span class="n">TextStyle</span><span class="p">(</span>
                    <span class="nl">color:</span> <span class="n">Colors</span><span class="p">.</span><span class="n">white</span><span class="p">,</span>
                    <span class="nl">fontSize:</span> <span class="m">24.0</span><span class="p">,</span>
                  <span class="p">),</span>
                <span class="p">),</span>
                <span class="n">Expanded</span><span class="p">(</span>
                  <span class="nl">child:</span> <span class="n">ListView</span><span class="p">.</span><span class="n">builder</span><span class="p">(</span>
                    <span class="nl">itemCount:</span> <span class="n">allmatches</span><span class="p">.</span><span class="n">length</span><span class="p">,</span>
                    <span class="nl">itemBuilder:</span> <span class="p">(</span><span class="n">context</span><span class="p">,</span> <span class="n">index</span><span class="p">)</span> <span class="p">{</span>
                      <span class="k">return</span> <span class="n">matchTile</span><span class="p">(</span><span class="n">allmatches</span><span class="p">[</span><span class="n">index</span><span class="p">]);</span>
                    <span class="p">},</span>
                  <span class="p">),</span>
                <span class="p">)</span>
              <span class="p">],</span>
            <span class="p">),</span>
          <span class="p">),</span>
        <span class="p">),</span>
      <span class="p">)</span>
    <span class="p">],</span>
  <span class="p">);</span>
<span class="p">}</span>

</code></pre></td></tr></table>
</div>
</div><p>goalstat.dart file</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-dart" data-lang="dart"><span class="k">import</span> <span class="s1">&#39;package:flutter/material.dart&#39;</span><span class="p">;</span>

<span class="n">Widget</span> <span class="n">goalStat</span><span class="p">(</span><span class="kt">int</span> <span class="n">expandedTime</span><span class="p">,</span> <span class="kt">int</span> <span class="n">homeGoal</span><span class="p">,</span> <span class="kt">int</span> <span class="n">awayGoal</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="n">home</span> <span class="o">=</span> <span class="n">homeGoal</span><span class="p">;</span>
  <span class="kd">var</span> <span class="n">away</span> <span class="o">=</span> <span class="n">awayGoal</span><span class="p">;</span>
  <span class="kd">var</span> <span class="n">elapsed</span> <span class="o">=</span> <span class="n">expandedTime</span><span class="p">;</span>
  <span class="k">if</span> <span class="p">(</span><span class="n">home</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="n">home</span> <span class="o">=</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">if</span> <span class="p">(</span><span class="n">away</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="n">away</span> <span class="o">=</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">if</span> <span class="p">(</span><span class="n">elapsed</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="n">elapsed</span> <span class="o">=</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">return</span> <span class="n">Expanded</span><span class="p">(</span>
    <span class="nl">child:</span> <span class="n">Column</span><span class="p">(</span>
      <span class="nl">mainAxisAlignment:</span> <span class="n">MainAxisAlignment</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
      <span class="nl">crossAxisAlignment:</span> <span class="n">CrossAxisAlignment</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
      <span class="nl">children:</span> <span class="p">[</span>
        <span class="n">Text</span><span class="p">(</span>
          <span class="s2">&#34;</span><span class="si">${</span><span class="n">elapsed</span><span class="si">}</span><span class="s2">&#39;&#34;</span><span class="p">,</span>
          <span class="nl">style:</span> <span class="n">TextStyle</span><span class="p">(</span>
            <span class="nl">fontSize:</span> <span class="m">30.0</span><span class="p">,</span>
          <span class="p">),</span>
        <span class="p">),</span>
        <span class="n">Expanded</span><span class="p">(</span>
          <span class="nl">child:</span> <span class="n">Center</span><span class="p">(</span>
            <span class="nl">child:</span> <span class="n">Text</span><span class="p">(</span>
              <span class="s2">&#34;</span><span class="si">${</span><span class="n">home</span><span class="si">}</span><span class="s2"> - </span><span class="si">${</span><span class="n">away</span><span class="si">}</span><span class="s2">&#34;</span><span class="p">,</span>
              <span class="nl">textAlign:</span> <span class="n">TextAlign</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
              <span class="nl">style:</span> <span class="n">TextStyle</span><span class="p">(</span>
                <span class="nl">fontSize:</span> <span class="m">36.0</span><span class="p">,</span>
              <span class="p">),</span>
            <span class="p">),</span>
          <span class="p">),</span>
        <span class="p">)</span>
      <span class="p">],</span>
    <span class="p">),</span>
  <span class="p">);</span>
<span class="p">}</span>

</code></pre></td></tr></table>
</div>
</div><p>matchstat.dart</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-dart" data-lang="dart"><span class="k">import</span> <span class="s1">&#39;package:flutter/material.dart&#39;</span><span class="p">;</span>

<span class="n">Widget</span> <span class="n">teamStat</span><span class="p">(</span><span class="kt">String</span> <span class="n">team</span><span class="p">,</span> <span class="kt">String</span> <span class="n">logoUrl</span><span class="p">,</span> <span class="kt">String</span> <span class="n">teamName</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="n">Expanded</span><span class="p">(</span>
    <span class="nl">child:</span> <span class="n">Column</span><span class="p">(</span>
      <span class="nl">children:</span> <span class="p">[</span>
        <span class="n">Text</span><span class="p">(</span>
          <span class="n">team</span><span class="p">,</span>
          <span class="nl">style:</span> <span class="n">TextStyle</span><span class="p">(</span>
            <span class="nl">fontSize:</span> <span class="m">18.0</span><span class="p">,</span>
          <span class="p">),</span>
        <span class="p">),</span>
        <span class="n">SizedBox</span><span class="p">(</span>
          <span class="nl">height:</span> <span class="m">10.0</span><span class="p">,</span>
        <span class="p">),</span>
        <span class="n">Expanded</span><span class="p">(</span>
          <span class="nl">child:</span> <span class="n">Image</span><span class="p">.</span><span class="n">network</span><span class="p">(</span>
            <span class="n">logoUrl</span><span class="p">,</span>
            <span class="nl">width:</span> <span class="m">54.0</span><span class="p">,</span>
          <span class="p">),</span>
        <span class="p">),</span>
        <span class="n">SizedBox</span><span class="p">(</span>
          <span class="nl">height:</span> <span class="m">10.0</span><span class="p">,</span>
        <span class="p">),</span>
        <span class="n">Text</span><span class="p">(</span>
          <span class="n">teamName</span><span class="p">,</span>
          <span class="nl">textAlign:</span> <span class="n">TextAlign</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
          <span class="nl">style:</span> <span class="n">TextStyle</span><span class="p">(</span>
            <span class="nl">fontSize:</span> <span class="m">18.0</span><span class="p">,</span>
          <span class="p">),</span>
        <span class="p">),</span>
      <span class="p">],</span>
    <span class="p">),</span>
  <span class="p">);</span>
<span class="p">}</span>

</code></pre></td></tr></table>
</div>
</div><p>matchtile.dart</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-dart" data-lang="dart"><span class="k">import</span> <span class="s1">&#39;package:flutter/material.dart&#39;</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">&#39;soccermodel.dart&#39;</span><span class="p">;</span>

<span class="n">Widget</span> <span class="n">matchTile</span><span class="p">(</span><span class="n">SoccerMatch</span> <span class="n">match</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="n">homeGoal</span> <span class="o">=</span> <span class="n">match</span><span class="p">.</span><span class="n">goal</span><span class="p">.</span><span class="n">home</span><span class="p">;</span>
  <span class="kd">var</span> <span class="n">awayGoal</span> <span class="o">=</span> <span class="n">match</span><span class="p">.</span><span class="n">goal</span><span class="p">.</span><span class="n">away</span><span class="p">;</span>
  <span class="k">if</span> <span class="p">(</span><span class="n">homeGoal</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="n">homeGoal</span> <span class="o">=</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">if</span> <span class="p">(</span><span class="n">awayGoal</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="n">awayGoal</span> <span class="o">=</span> <span class="m">0</span><span class="p">;</span>

  <span class="k">return</span> <span class="n">Container</span><span class="p">(</span>
    <span class="nl">margin:</span> <span class="n">EdgeInsets</span><span class="p">.</span><span class="n">symmetric</span><span class="p">(</span><span class="nl">vertical:</span> <span class="m">12.0</span><span class="p">),</span>
    <span class="nl">child:</span> <span class="n">Row</span><span class="p">(</span>
      <span class="nl">mainAxisAlignment:</span> <span class="n">MainAxisAlignment</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
      <span class="nl">crossAxisAlignment:</span> <span class="n">CrossAxisAlignment</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
      <span class="nl">children:</span> <span class="p">[</span>
        <span class="n">Expanded</span><span class="p">(</span>
          <span class="nl">child:</span> <span class="n">Text</span><span class="p">(</span>
            <span class="n">match</span><span class="p">.</span><span class="n">home</span><span class="p">.</span><span class="n">name</span><span class="p">,</span>
            <span class="nl">textAlign:</span> <span class="n">TextAlign</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
            <span class="nl">style:</span> <span class="n">TextStyle</span><span class="p">(</span>
              <span class="nl">color:</span> <span class="n">Colors</span><span class="p">.</span><span class="n">white</span><span class="p">,</span>
              <span class="nl">fontSize:</span> <span class="m">16.0</span><span class="p">,</span>
            <span class="p">),</span>
          <span class="p">),</span>
        <span class="p">),</span>
        <span class="n">Image</span><span class="p">.</span><span class="n">network</span><span class="p">(</span>
          <span class="n">match</span><span class="p">.</span><span class="n">home</span><span class="p">.</span><span class="n">logoUrl</span><span class="p">,</span>
          <span class="nl">width:</span> <span class="m">36.0</span><span class="p">,</span>
        <span class="p">),</span>
        <span class="n">Expanded</span><span class="p">(</span>
          <span class="nl">child:</span> <span class="n">Text</span><span class="p">(</span>
            <span class="s2">&#34;</span><span class="si">${</span><span class="n">homeGoal</span><span class="si">}</span><span class="s2"> - </span><span class="si">${</span><span class="n">awayGoal</span><span class="si">}</span><span class="s2">&#34;</span><span class="p">,</span>
            <span class="nl">textAlign:</span> <span class="n">TextAlign</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
            <span class="nl">style:</span> <span class="n">TextStyle</span><span class="p">(</span>
              <span class="nl">color:</span> <span class="n">Colors</span><span class="p">.</span><span class="n">white</span><span class="p">,</span>
              <span class="nl">fontSize:</span> <span class="m">16.0</span><span class="p">,</span>
            <span class="p">),</span>
          <span class="p">),</span>
        <span class="p">),</span>
        <span class="n">Image</span><span class="p">.</span><span class="n">network</span><span class="p">(</span>
          <span class="n">match</span><span class="p">.</span><span class="n">away</span><span class="p">.</span><span class="n">logoUrl</span><span class="p">,</span>
          <span class="nl">width:</span> <span class="m">36.0</span><span class="p">,</span>
        <span class="p">),</span>
        <span class="n">Expanded</span><span class="p">(</span>
          <span class="nl">child:</span> <span class="n">Text</span><span class="p">(</span>
            <span class="n">match</span><span class="p">.</span><span class="n">away</span><span class="p">.</span><span class="n">name</span><span class="p">,</span>
            <span class="nl">textAlign:</span> <span class="n">TextAlign</span><span class="p">.</span><span class="n">center</span><span class="p">,</span>
            <span class="nl">style:</span> <span class="n">TextStyle</span><span class="p">(</span>
              <span class="nl">color:</span> <span class="n">Colors</span><span class="p">.</span><span class="n">white</span><span class="p">,</span>
              <span class="nl">fontSize:</span> <span class="m">16.0</span><span class="p">,</span>
            <span class="p">),</span>
          <span class="p">),</span>
        <span class="p">),</span>
      <span class="p">],</span>
    <span class="p">),</span>
  <span class="p">);</span>
<span class="p">}</span>


</code></pre></td></tr></table>
</div>
</div><p>我们已经完成了，尝试运行应用程序并查看您美丽的应用程序。如果你喜欢这个项目，不要忘记分享它，你可以告诉我们你想在下一篇文章中看到什么</p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-18</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://luckly.work/%E5%9C%A8flutter%E4%B8%AD%E5%88%B6%E4%BD%9C%E8%B6%B3%E7%90%83%E8%AE%B0%E5%88%86%E7%89%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" data-title="《在Flutter中制作足球记分牌应用程序》" data-hashtags="flutter"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://luckly.work/%E5%9C%A8flutter%E4%B8%AD%E5%88%B6%E4%BD%9C%E8%B6%B3%E7%90%83%E8%AE%B0%E5%88%86%E7%89%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" data-hashtag="flutter"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://luckly.work/%E5%9C%A8flutter%E4%B8%AD%E5%88%B6%E4%BD%9C%E8%B6%B3%E7%90%83%E8%AE%B0%E5%88%86%E7%89%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" data-title="《在Flutter中制作足球记分牌应用程序》"><i class="fab fa-hacker-news fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://luckly.work/%E5%9C%A8flutter%E4%B8%AD%E5%88%B6%E4%BD%9C%E8%B6%B3%E7%90%83%E8%AE%B0%E5%88%86%E7%89%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" data-title="《在Flutter中制作足球记分牌应用程序》"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://luckly.work/%E5%9C%A8flutter%E4%B8%AD%E5%88%B6%E4%BD%9C%E8%B6%B3%E7%90%83%E8%AE%B0%E5%88%86%E7%89%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" data-title="《在Flutter中制作足球记分牌应用程序》" data-image="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/%E5%9C%A8flutter%E4%B8%AD%E5%88%A9%E7%94%A8firebase%E6%8F%92%E4%BB%B6%E8%BF%9B%E8%A1%8C%E7%94%A8%E6%88%B7%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" class="prev" rel="prev" title="《在Flutter中利用Firebase插件进行用户身份验证应用程序》"><i class="fas fa-angle-left fa-fw"></i>《在Flutter中利用Firebase插件进行用户身份验证应用程序》</a>
            <a href="/%E5%9C%A8flutter%E4%B8%AD%E7%9A%84%E5%BC%80%E5%8F%91%E5%B0%8F%E6%8A%80%E5%B7%A71/" class="next" rel="next" title="《在Flutter中的开发小技巧1》">《在Flutter中的开发小技巧1》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">早起的年轻人</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"cookieconsent":{"content":{"dismiss":"同意","link":"了解更多","message":"本网站使用 Cookies 来改善您的浏览体验."},"enable":true,"palette":{"button":{"background":"#f0f0f0"},"popup":{"background":"#1aa3ff"}},"theme":"edgeless"},"data":{"id-1":"早起的年轻人","id-2":"早起的年轻人"},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.zh-cn","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"},"typeit":{"cursorChar":"|","cursorSpeed":1000,"data":{"id-1":["id-1"],"id-2":["id-2"]},"duration":-1,"speed":100}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
